<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">

        <div v-show="showForm">
            <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">添加工艺</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物料类型：">
                            {{ruleForm.type}}
                        </el-form-item>
                        <el-form-item label="标准名称：">
                            {{standard}}
                        </el-form-item>
                        <el-form-item label="执行标准：" style="width:500px" v-if="ifshow">
                            <img :src="imgurl" alt="" style="width:200px;height:200px;">
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工艺名称：" prop="name">
                            {{ruleForm.name}}
                        </el-form-item>
                        <el-form-item label="品名：" prop="name">
                            {{ruleForm.breedName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item v-for="(item,index) in ruleForm.technologies" :key="index" :label="'工艺描述'+(index+1)">
                    <div>{{item.specification}}</div>
                </el-form-item>
            </div>

            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitForm()">确认无误</el-button>
                <el-button @click="editback">返回修改</el-button>
            </el-form-item>
        </div>
        <div v-show = "show">
            <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">添加工艺</h3>
                <el-row>
                    <el-col :span="12">

                        <el-form-item label="物料类型：" prop="type">
                            <el-select v-model="ruleForm.type" @change="changeType" filterable placeholder="请选择" style="width: 300px;">
                                <el-option label="提取饮片" value="提取饮片"></el-option>
                                <el-option label='配方颗粒(颗粒)' value="配方颗粒(颗粒)"></el-option>
								<el-option label='配方颗粒(浸膏粉)' value="配方颗粒(浸膏粉)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="* 标准类型：" prop="standard">
                            <el-select v-model="ruleForm.standard"  filterable placeholder="请选择" style="width: 300px;">
                                <el-option label="国标" value="1"></el-option>
                                <el-option label='省标' value="2"></el-option>
                                <el-option label='省标-北京' value="3"></el-option>
                                <el-option label='省标-上海' value="4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="执行标准：" style="width:500px">
                            <upload-img ref="uploadChang" :maxNum="1" :files='listUrl'></upload-img>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <!-- <el-form-item label="加工产品：" prop="productName">
                            <el-select v-model="ruleForm.productName" filterable placeholder="请选择" style="width: 300px;">
                                <el-option v-for="(item,index) in productLists" :key="index" :label="item.breedName" :value="item.breedName"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="工艺名称：" prop="name">
                            <el-input placeholder="请输入" v-model.trim="ruleForm.name" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="名称：" prop="breedName">
                            <el-select v-model="ruleForm.breedName"   :remote-method="remoteMethod" @change="changeBreed"  remote value-key="breedName" filterable placeholder="请选择" style="width: 300px;">
                                <el-option
                                    v-for="item in breedList"
                                    :key="item.breedName"
                                    :label="item.breedName"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item v-for="(item,index) in ruleForm.technologies"  :key="index" :label="'工艺描述'+(index+1)">
                    <el-input v-model.trim="item.specification" prop="specification" style="width:300px;" placeholder="工艺描述"></el-input>
                    <el-button @click = "deleteUnit(index)" class="delete_btn">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="added_unit" class='added_unit'>添加一条</el-button>
                </el-form-item>

            </div>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitrules('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </div>
        </el-form>
    </div>
</template>

<script>
import {materialBreed_findAll,process_save,process_findById,process_update,pack_findPackBreedName} from '@/request/api'
import uploadImg from '../../../common/uploadImg';
    export default {
        components: {
            uploadImg,

        },
        data() {
            return {
				res:{
					images:[]
				},
                ifshow:true,
                imgurl:'',
                show:true,
                listUrl:'',
                productLists:'',
                labelPosition:'right',
                showForm: false,
                ruleForm: {
                    type:'',
                    name:'',
                    standards:'',
                    productName:'',
                    oldStandards:'',
                    technologies:[]
                },
                rules:{
                    type: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    name: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],

                    specification: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                },
                breedList:[],
                standard:''
            };
        },
        mounted(){
            this.id = this.$route.query.id
            this.ruleForm.companyId = this.$route.query.sid
            if(this){

            }
            this.ruleForm.type = this.$route.query.name
            if(this.id == undefined){

            }else{
                this.init1()
            }
            this.init()
        },
        methods: {

            changeBreed(ele){
                // console.log(ele)
				this.ruleForm.breedName = ele.breedName
				this.ruleForm.upperCase = ele.upperCase
                this.ruleForm.materialBreedId = ele.id
				// pack_findMaterialBreedMsg({
				//     breedName:"",
				//     materialType:this.materialType,
				// }).then((res) =>{
				//     this.breedList = res.data
				// })
            },
            remoteMethod(query){
			   // console.log(query)

                if(this.ruleForm.type == "配方颗粒(颗粒)"){
                    var type = "配方颗粒"
                }else{
                    var type = this.ruleForm.type
                }
			    pack_findPackBreedName({
			        materialType: type,
			        upperCase:query,
                    companyId:this.ruleForm.companyId
			    }).then((res)=>{
			        this.breedList = res.data
			    })

			},
            editback(){
                this.show = true
                this.showForm = false
            },
            init1(){
                process_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    this.ruleForm.oldStandards = res.data.standards
					if(this.ruleForm.standards == ""){
						const arr = this.ruleForm.standards.split(";")
                        if(arr == ""){

                    }else{
                        this.listUrl = arr.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
					}

                })
            },
            changeType(){
                // this.ruleForm.type = this.ruleForm.name

                this.init()
            },
            submitrules(formName){
                 if(this.ruleForm.standard == 1){
                    this.standard = "国标"
                }else if(this.ruleForm.standard == 2){
                    this.standard = "省标"
                }else if(this.ruleForm.standard == 3){
                    this.standard = "省标-北京"
                }else if(this.ruleForm.standard == 4){
                    this.standard = "省标-上海"
                }

                if(this.$refs.uploadChang.fileList.length>0){
                    this.imgurl = this.$refs.uploadChang.fileList[0].url
                }else{

                }
                if(this.imgurl == ""){
                    this.ifshow = false
                }else{
                    this.ifshow = true
                }

                this.$refs[formName].validate((valid)=>{
                    if(valid){
						// console.log(this.ruleForm.technologies)
						if(this.ruleForm.technologies == ""){
							this.showForm = true
							this.show = false
						}else{
							for (let i = 0; i < this.ruleForm.technologies.length; i++) {
                            if(this.ruleForm.technologies[i].specification == ""){
                                var tishi = '添加的工艺描述'+ (i+1) +'不能为空'
                                this.$notify({
                                    title: '提示',
                                    message: tishi,
                                    type: 'info',
                                    duration:1500
                                });
                                this.showForm = false
                                this.show = true
                            }else{
                                this.showForm = true
                                this.show = false
                            }
                        }
						}


                    }else{
                        return false
                    }
                })
            },
            init(){
                materialBreed_findAll("").then((res)=>{
                    this.productLists = res.data

                })

                if(this.ruleForm.type == "配方颗粒(颗粒)"){
                    var type = "配方颗粒"
                }else{
                    var type = this.ruleForm.type
                }
                 pack_findPackBreedName({
			        materialType: type,
                    query:'',
                    companyId:this.ruleForm.companyId
			    }).then((res)=>{
			        this.breedList = res.data
                    // console.log(res)
			    })
            },
            added_unit(){
                this.ruleForm.technologies.push({specification:''})
            },

            deleteUnit(index){
        // this.units.splice(index,1)
                this.$confirm('是否确定删除该条工艺描述?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.ruleForm.technologies.splice(index,1)
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                            duration:1000
                        });
                    }).catch(() => {
                        this.$notify({
                            title: '提示',
                            message: '已取消删除',
                            type: 'info',
                            duration:1000
                        });
                    });
            },
            backPage () {
                this.$router.go(-1);
            },
            submitForm() {
                const list = JSON.stringify(this.ruleForm.technologies)
                this.ruleForm.technologiesList = list.toString();
                var imgurls = this.$refs.uploadChang.fileList
                let formdata = new FormData()
                var arr=""
                for(var i=0;i<imgurls.length;i++){
                    if(imgurls[i].status != "success"){
                        formdata.append("files",imgurls[i].raw)
                    }
                   arr += imgurls[i].name + ';'
                }
                var str = arr.substr(0,arr.length-1)
                this.ruleForm.standards = str.substring(str.lastIndexOf("/")+1)
                for(var a in this.ruleForm){
                    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                        this.ruleForm[a] = ""
                        formdata.append(a,'')
                    }else{
                        formdata.append(a,this.ruleForm[a])
                    }
                }
                if(this.id == undefined){
                    process_save(formdata).then((res)=>{
                    this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration:1000
                        });
                        this.$router.go(-1)
                    })
                }else{
                    process_update(formdata).then((res)=>{
                    this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration:1000
                        });
                        this.$router.go(-1)
                    })
                }

            },
            wuliao() {

            }
        }
    }
</script>
<style scoped lang="less">
.delete_btn{
    margin-left:6px;
}
</style>
